// device-frame.js
class DeviceFrame {
  constructor() {
    this.isFrameVisible = true;
    this.init();
  }
  
  init() {
    this.createToggleButton();
    this.bindEvents();
    this.updateStatusBar();
  }
  
  createToggleButton() {
    const button = document.createElement('button');
    button.className = 'frame-toggle';
    button.textContent = '隐藏边框';
    button.setAttribute('aria-label', '切换设备边框显示');
    document.body.appendChild(button);
    this.toggleButton = button;
  }
  
  bindEvents() {
    this.toggleButton.addEventListener('click', () => {
      this.toggleFrame();
    });
    
    // 键盘快捷键 F 切换边框
    document.addEventListener('keydown', (e) => {
      if (e.key === 'f' || e.key === 'F') {
        e.preventDefault();
        this.toggleFrame();
      }
    });
    
    // 监听窗口大小变化
    window.addEventListener('resize', () => {
      this.handleResize();
    });
  }
  
  toggleFrame() {
    const frame = document.querySelector('.device-frame');
    if (!frame) return;
    
    this.isFrameVisible = !this.isFrameVisible;
    
    if (this.isFrameVisible) {
      frame.classList.remove('frame-hidden');
      this.toggleButton.textContent = '隐藏边框';
    } else {
      frame.classList.add('frame-hidden');
      this.toggleButton.textContent = '显示边框';
    }
    
    // 添加过渡效果
    frame.style.transition = 'all 0.3s ease';
  }
  
  handleResize() {
    // 在移动端自动隐藏切换按钮
    if (window.innerWidth <= 480) {
      this.toggleButton.style.display = 'none';
    } else {
      this.toggleButton.style.display = 'block';
    }
  }
  
  updateStatusBar() {
    // 动态更新状态栏时间
    this.updateTime();
    setInterval(() => {
      this.updateTime();
    }, 1000);
  }
  
  updateTime() {
    const timeElements = document.querySelectorAll('.status-bar .time');
    if (timeElements.length > 0) {
      const now = new Date();
      const timeString = now.toLocaleTimeString('zh-CN', {
        hour: '2-digit',
        minute: '2-digit',
        hour12: false
      });
      
      timeElements.forEach(element => {
        element.textContent = timeString;
      });
    }
  }
  
  // 添加状态栏到页面内容
  addStatusBar(pageContent) {
    if (!pageContent || pageContent.querySelector('.status-bar')) {
      return; // 已经有状态栏或无效内容
    }
    
    const statusBar = document.createElement('div');
    statusBar.className = 'status-bar';
    statusBar.innerHTML = `
      <div class="time">09:41</div>
      <div class="battery-wifi">
        <i data-feather="wifi" style="width: 16px; height: 16px;"></i>
        <i data-feather="battery" style="width: 16px; height: 16px;"></i>
      </div>
    `;
    
    pageContent.prepend(statusBar);
    
    // 重新初始化图标
    if (typeof feather !== 'undefined') {
      feather.replace();
    }
  }
  
  // 获取设备信息（用于调试）
  getDeviceInfo() {
    return {
      frameVisible: this.isFrameVisible,
      screenWidth: window.innerWidth,
      screenHeight: window.innerHeight,
      devicePixelRatio: window.devicePixelRatio,
      userAgent: navigator.userAgent
    };
  }
}

// 初始化设备边框控制
document.addEventListener('DOMContentLoaded', () => {
  window.deviceFrame = new DeviceFrame();
  
  // 监听页面加载完成事件，自动添加状态栏
  document.addEventListener('pageLoaded', (e) => {
    const pageContent = document.querySelector('.page-content');
    if (pageContent && window.deviceFrame) {
      window.deviceFrame.addStatusBar(pageContent);
    }
  });
}); 